<template>
  <basic-container class="tabBody"> 
      <el-tabs v-model="activeName" type="border-card">
        <el-tab-pane label="总线到输入映射" name="input">
          <el-row gutter="4">
            <!-- 总线 -->
            <el-col :span="8" >
              <el-tag >服务数据总线</el-tag>
              <avue-crud  :option="databusOption" 
                            :data="databusData"
                            ref="databusCrud"
                            v-model="databusForm"
                            @row-click ="checkCurrentRow"
                            @selection-change="selectionChange"
                          >
                <template slot="checkBoxProp" slot-scope="scope" >
                  <div>
                    <span>
                       <el-checkbox v-model="scope.row.checked"></el-checkbox>
                    </span>
                  </div>
                </template>
                <template slot="indexProp" slot-scope="scope" >
                  <div>
                    {{scope.index + 1}}
                  </div>
                </template>
              </avue-crud>
            </el-col>
            <!-- 输入 -->
            <el-col :span="8">
              <el-tag>组件/流程输入</el-tag>
              <avue-crud  :option="inputOption" 
                              :data="inputData"
                              ref="inputCrud"
                              v-model="inputForm"
                              @row-click ="checkInputCurrentRow"
                            >
                <template slot="checkBoxProp" slot-scope="scope" >
                  <div>
                    <span>
                       <el-checkbox v-model="scope.row.checked"></el-checkbox>
                    </span>
                  </div>
                </template>
                <template slot="indexProp" slot-scope="scope" >
                  <div>
                    {{scope.index + 1}}
                  </div>
                </template>
              </avue-crud>
            </el-col>
            <!-- 映射关系 -->
            <el-col :span="8">
              <el-tag >映射关系</el-tag>
              <avue-crud  :option="inputMappingOption" 
                              :data="inputMappingData"
                              ref="inputMappingCrud"
                              @row-click ="getMappingElement"
                              @row-del="mappingRowDel"
                              @sortable-change="inputMappingSortChange"
                              v-model="inputMappingForm"
                            >
                <template slot="mappingDerict" slot-scope="scope" >
                  <div>
                    >
                  </div>
                </template>
              </avue-crud>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="输出到总线映射"  name="output">
          <el-row gutter="4">
            <!-- 输出 -->
            <el-col :span="8">
              <el-tag>组件/流程输出</el-tag>
              <avue-crud  :option="inputOption" 
                              :data="outputData"
                              ref="outputCrud"
                              v-model="outputForm"
                              @row-click ="checkOutputCurrentRow"
                            >
                <template slot="checkBoxProp" slot-scope="scope" >
                  <div>
                    <span>
                       <el-checkbox v-model="scope.row.checked"></el-checkbox>
                    </span>
                  </div>
                </template>
                <template slot="indexProp" slot-scope="scope" >
                  <div>
                    {{scope.index + 1}}
                  </div>
                </template>
              </avue-crud>
            </el-col>
            <!-- 总线 -->
            <el-col :span="8" >
              <el-tag >服务数据总线</el-tag>
              <avue-crud  :option="databusOption" 
                            :data="databusData"
                            ref="databusCrud"
                            v-model="databusForm"
                            @row-click ="checkBusOutputCurrentRow"
                          >
                <template slot="checkBoxProp" slot-scope="scope" >
                  <div>
                    <span>
                       <el-checkbox v-model="scope.row.checked"></el-checkbox>
                    </span>
                  </div>
                </template>
                <template slot="indexProp" slot-scope="scope" >
                  <div>
                    {{scope.index + 1}}
                  </div>
                </template>
              </avue-crud>
            </el-col>
            
            <!-- 映射关系 -->
            <el-col :span="8">
              <el-tag >映射关系</el-tag>
              <avue-crud  :option="outputMappingOption" 
                              :data="outputMappingData"
                              ref="outputMappingCrud"
                              @row-click ="getMappingOutputElement"
                              @row-del="mappingOutputRowDel"
                              v-model="outputMappingForm"
                              @sortable-change="outputMappingSortChange"
                            >
                <template slot="mappingDerict" slot-scope="scope" >
                  <div>
                    >
                  </div>
                </template>
              </avue-crud>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs> 
      <div class="dialog-footer">
        <el-button size="small" type="primary" id="copyBtn" @click="saveMappingData">保存配置</el-button>
        <el-button size="small" @click="mappingDialog">关 闭</el-button>
      </div>
  </basic-container>
</template>

<script>
import {exportSysMicroServiceConfigExcel,saveOrUpdateSysMicroServiceConfig,saveOrUpdateSysMicroServiceConfigList,saveSysMicroServiceConfig,saveSysMicroServiceConfigList,deleteSysMicroServiceConfig,querySysMicroServiceConfig,querySysMicroServiceConfigListPage,updateSysMicroServiceConfig,deleteSysMicroServiceConfigList} from '@/api/micro/sysMicroServiceConfigApi';

import {exportSysMicroComponentExcel,saveOrUpdateSysMicroComponent,saveOrUpdateSysMicroComponentList,saveSysMicroComponent,saveSysMicroComponentList,deleteSysMicroComponent,querySysMicroComponent,querySysMicroComponentListPage,updateSysMicroComponent,deleteSysMicroComponentList} from '@/api/micro/sysMicroComponentApi';
import {exportSysMicroServiceComponentExcel,saveOrUpdateSysMicroServiceComponent,saveOrUpdateSysMicroServiceComponentList,saveSysMicroServiceComponent,saveSysMicroServiceComponentList,deleteSysMicroServiceComponent,querySysMicroServiceComponent,querySysMicroServiceComponentListPage,updateSysMicroServiceComponent,deleteSysMicroServiceComponentList} from '@/api/micro/sysMicroServiceComponentApi';
import {mapGetters} from 'vuex';
import { reqCommonMsg } from '@/util/reqCommonMsg';
import {filterFormat} from '@/util/util';
export default {
  props: {
    serviceBusData: {
      type: Object,
      default: {}
    },
    serviceComponentData: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      activeName: 'input',
      // 数据总线
      selectionList: [],
      databusData: [],
      databusForm: {},
      databusCurrentRow: {},
      databusLoading: true, 
      databusOption: {
        columnBtn: false,
        refreshBtn: false,
        index: false,
        stripe:true,
        calcHeight: 80,
        searchShow: true,
        searchMenuSpan: 6,
        tip: false,
        border: true,
        selection: false,
        addBtn: false,
        viewBtn: false,
        delBtn: true,
        cancelBtn: true,
        printBtn:false,
        saveBtn: true,
        filterBtn:false,     
        editBtn:true,  
        cellBtn:true,     
        menuWidth: 150,
        delBtnText: '删除',
        dialogMenuPosition: 'center',
        dialogDirection:'rtl',
        dialogType:'dialog',
        dialogFullscreen:false,
        dialogClickModal:false,
        dialogWidth: '80%',
        highlightCurrentRow:  true,
        searchShow:true,
        sortable:false,
        emptyText:'暂无总线字段',
        menu:false,
        column: [
          {
            label: '#',
            prop: 'checkBoxProp', 
            slot: true,
            width: 40
          },
          {
            label: '#',
            prop: 'indexProp', 
            slot: true,
            width: 40
          },
          {
            label: '总线字段',
            prop: 'columnName', 
            type: 'input',
          },
          
          {
            label: '字段类型',
            prop: 'dataType', 
            type: 'input',
            width: 100,
          },
          {
            label: '字段说明',
            prop: 'columnComment', 
            type: 'input',
          }
        ]
      },
      
      //组件信息
      componentData: [],

      // 输出接口区
      interfaceMode: 'input',
      outputForm: {},
      outputCurrentRow: {},
      outputLoading: true, 
      outputData: [],

      // 输入接口区
      inputData: [],
      inputForm: {},
      inputCurrentRow: {},
      inputLoading: true, 
      inputOption: {
        columnBtn: false,
        refreshBtn: false,
        index: false,
        stripe:true,
        calcHeight: 80,
        searchShow: true,
        searchMenuSpan: 6,
        tip: false,
        border: true,
        selection: false,
        addBtn: false,
        viewBtn: false,
        delBtn: true,
        cancelBtn: false,
        cellBtn:false,
        printBtn:false,
        saveBtn: false,
        filterBtn:false,     
        editBtn:false,       
        menuWidth: 50,
        delBtnText: ' ',
        dialogMenuPosition: 'center',
        dialogDirection:'rtl',
        dialogType:'dialog',
        dialogFullscreen:false,
        dialogClickModal:false,
        dialogWidth: '80%',
        highlightCurrentRow:  true,
        searchShow:true,
        sortable:false,
        menu: false,
        emptyText:'暂无接口字段',
        addBtnText:'新增接口字段',
        column: [
          {
            label: '#',
            prop: 'checkBoxProp', 
            slot: true,
            width: 40
          },
          {
            label: '#',
            prop: 'indexProp', 
            slot: true,
            width: 40
          },
          {
            label: '接口字段',
            prop: 'columnName', 
            type: 'input',
          },
          {
            label: '字段类型',
            prop: 'dataType', 
            type: 'input',
            width: 100,
          },
          {
            label: '字段说明',
            prop: 'columnComment', 
            type: 'input',
          },
        ]
      },
      

      // 总线>输入映射关系
      inputMappingData: [],
      inputMappingForm: {},
      inputMappingCurrentRow: {},
      inputMappingLoading: true, 
      inputMappingOption: {
        columnBtn: false,
        refreshBtn: false,
        index: true,
        stripe:true,
        calcHeight: 80,
        searchShow: true,
        searchMenuSpan: 6,
        tip: false,
        border: true,
        selection: false,
        addBtn: false,
        viewBtn: false,
        delBtn: true,
        cancelBtn: false,
        cellBtn:false,
        printBtn:false,
        saveBtn: false,
        filterBtn:false,     
        editBtn:false,       
        menuWidth: 50,
        delBtnText: ' ',
        dialogMenuPosition: 'center',
        dialogDirection:'rtl',
        dialogType:'dialog',
        dialogFullscreen:false,
        dialogClickModal:false,
        dialogWidth: '80%',
        highlightCurrentRow:  true,
        searchShow:true,
        sortable:true,
        emptyText:'暂无映射字段',
        column: [
          {
            label: '总线字段',
            prop: 'dataBusColumnName', 
            type: 'input',
          },
          {
            label: '#',
            prop: 'mappingDerict', 
            type: 'input',
            slot: true,
            width:30
          },
          {
            label: '输入字段',
            prop: 'inputColumnName', 
            type: 'input',
          },
          {
            label: '输入字段说明',
            prop: 'inputColumnComment', 
            type: 'input',
          },
        ]
      },

      // 输出>总线映射关系
      outputMappingData: [],
      outputMappingForm: {},
      outputMappingCurrentRow: {},
      outputMappingLoading: true, 
      outputMappingOption: {
        columnBtn: false,
        refreshBtn: false,
        index: true,
        stripe:true,
        calcHeight: 80,
        searchShow: true,
        searchMenuSpan: 6,
        tip: false,
        border: true,
        selection: false,
        addBtn: false,
        viewBtn: false,
        delBtn: true,
        cancelBtn: false,
        cellBtn:false,
        printBtn:false,
        saveBtn: false,
        filterBtn:false,     
        editBtn:false,       
        menuWidth: 50,
        delBtnText: ' ',
        dialogMenuPosition: 'center',
        dialogDirection:'rtl',
        dialogType:'dialog',
        dialogFullscreen:false,
        dialogClickModal:false,
        dialogWidth: '80%',
        highlightCurrentRow:  true,
        searchShow:true,
        sortable:true,
        emptyText:'暂无映射字段',
        column: [
          {
            label: '输出字段',
            prop: 'outputColumnName', 
            type: 'input',
          },
          
          {
            label: '#',
            prop: 'mappingDerict', 
            type: 'input',
            slot: true,
            width:30
          },
          {
            label: '总线字段',
            prop: 'dataBusColumnName', 
            type: 'input',
          },
          {
            label: '输入字段说明',
            prop: 'outputColumnComment', 
            type: 'input',
          },
        ]
      },
      data: [],
      // 请求参数区
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      reqParams: {
        singleBody: {},
        listBody: [{}],
        sqlCondition:[],
        orderRule: [],
        currentPage: 1,
        pageSize: 10
      },
      commonData: null,
      conditions: [],
      orderRules: [],
      singleBody: {}
    };
  },
  computed: {
    ...mapGetters(['website','orgTree','genOrgTree','userInfo','permission','projectInfo']),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.sys_micro_service_component_add, false),
        viewBtn: this.vaildData(this.permission.sys_micro_service_component_view, false),
        delBtn: this.vaildData(this.permission.sys_micro_service_component_delete, false),
        editBtn: this.vaildData(this.permission.sys_micro_service_component_edit, false),
        printBtn: this.vaildData(this.permission.sys_micro_service_component_print, false),
        searchBtn:this.vaildData(this.permission.sys_micro_service_component_search, false)
      };
    },
    ids() {
      let ids = [];
      console.log('==this.selectionList===',this.selectionList);
      this.selectionList.forEach(ele => {
        ids.push({id : ele.id});
      });
      return ids;
    } 
  },
  methods: {
    /**
     * 加载列表数据
     */
    queryComponent() {
      this.loading = true;
      this.reqParams =  {
        singleBody: {
          componentCode: this.serviceComponentData.componentCode
        },
        currentPage: 1,
        pageSize:10
      }
      this.commonData = reqCommonMsg(this.reqParams)
      querySysMicroComponentListPage(this.commonData).then(res => {
        const data = res.data.body;
        this.componentData = data.listBody[0];
        this.componentData.inputMsgBody  = JSON.parse(this.componentData.inputMsgBody);
        this.componentData.outputMsgBody = JSON.parse(this.componentData.outputMsgBody);
        this.inputData = this.componentData.inputMsgBody;
        this.outputData = this.componentData.outputMsgBody;
        this.inputData.forEach(element => {
          element.checked =  false;
        });
        this.outputData.forEach(element => {
          element.checked =  false;
        });
        this.loading = false; 
      }, error => {
        this.loading = false; 
      });
    },
    /**
     * 加载流程数据
     */
    queryProcess() {
      this.loading = true;
      this.reqParams =  {
        singleBody: {
          serviceCode: this.serviceComponentData.componentCode
        },
        currentPage: 1,
        pageSize:10
      }
      this.commonData = reqCommonMsg(this.reqParams)
      querySysMicroServiceConfigListPage(this.commonData).then(res => {
        const data = res.data.body;
        this.componentData = data.listBody[0];
        this.componentData.inputMsgBody  = JSON.parse(this.componentData.inputMsgBody);
        this.componentData.outputMsgBody = JSON.parse(this.componentData.outputMsgBody);
        this.inputData = this.componentData.inputMsgBody;
        this.outputData = this.componentData.outputMsgBody;
        this.inputData.forEach(element => {
          element.checked =  false;
        });
        this.outputData.forEach(element => {
          element.checked =  false;
        });
        this.loading = false; 
      }, error => {
        this.loading = false; 
      });
    },
    /**
     * 选择
     */
    selectionChange(list) {
      this.selectionList = list;
    },
    /**
     * 清除选择
     */
    selectionClear() {
      this.selectionList = [];
      this.$refs.databusCrud.toggleSelection();
    },

    /***总线到输入映射处理开始 */
    /**
     * 单击选择总线字段
     */
    checkCurrentRow(row){
      this.databusData.forEach(element => {
        if(row.columnName == element.columnName){
          element.checked =  true;
          this.databusCurrentRow = row;
        }
        else{
          element.checked =  false;
        }
      });
      let tmpInputData = JSON.parse(JSON.stringify(this.databusData));
      this.databusData = [];
      this.databusData = tmpInputData;
    },

    /**
     * 单击选择输入接口字段
     */
    checkInputCurrentRow(row){
      this.inputData.forEach(element => {
        if(row.columnName == element.columnName){
          element.checked =  true;
          this.inputCurrentRow =  row;
          this.mappingDatabusAndInputData();
        }
        else{
          element.checked =  false;
        }
      });
      let tmpInputData = this.deepClone(this.inputData)
      this.inputData = [];
      this.inputData = tmpInputData;
    },
    /**
     * 开始映射字段关系
     */
    mappingDatabusAndInputData(){
      if(this.databusCurrentRow.dataType != this.inputCurrentRow.dataType){
        this.$message({
          type: 'warning',
          message: '字段类型不匹配!'
        });
        return false
      }
      if(this.databusCurrentRow && this.databusCurrentRow.columnName){
        let isInMappingList = false;
        this.inputMappingData.forEach(element => {
          if(element.dataBusColumnName == this.databusCurrentRow.columnName && element.inputColumnName == this.inputCurrentRow.columnName){
            isInMappingList = true;
          }
        });
        //如果不存在则添加一条映射记录
        if(!isInMappingList){
          this.inputMappingData.push({
            dataBusColumnName: this.databusCurrentRow.columnName,
            dataBusColumnComment: this.databusCurrentRow.columnComment,
            inputColumnName: this.inputCurrentRow.columnName,
            inputColumnComment: this.inputCurrentRow.columnComment
          });
        }
      }
    },
    /**
     * 根据映射关系反显示总线和输入
     */
    getMappingElement(row){
      //总线
      this.databusData.forEach(element => {
        if(row.dataBusColumnName == element.columnName){
          element.checked =  true;
          this.databusCurrentRow = element;
        }
        else{
          element.checked =  false;
        }
      });
      let tmpDatabusData = this.deepClone(this.databusData)
      this.databusData = [];
      this.databusData = tmpDatabusData;

      //输入
      this.inputData.forEach(element => {
        if(row.inputColumnName == element.columnName){
          element.checked =  true;
          this.inputCurrentRow =  element;
        }
        else{
          element.checked =  false;
        }
      });

      let tmpInputData = this.deepClone(this.inputData)
      this.inputData = [];
      this.inputData = tmpInputData;
      console.log('==this.inputDat===',this.inputDat);
    },
    /**
     * 删除映射关系
     */
    mappingRowDel(row){
      this.$confirm('确定删除映射关系?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.inputMappingData.forEach((element,index) => {
            if(element.dataBusColumnName == row.dataBusColumnName && element.inputColumnName == row.inputColumnName ){
              this.inputMappingData.splice(index,1);
            }
          });
        })
        .then(() => {
          
        }).catch(() => {});
    },

    /**
     * input接口映射排序
     */
    inputMappingSortChange(oldindex, newindex, row, list) {
      this.inputMappingData=[]
      this.$nextTick(()=>{
        this.inputMappingData=list;
      })
    },
    
    /***输出到总线映射处理开始 */
    /**
     * 单击选择总线字段
     */
    checkOutputCurrentRow(row){
      this.outputData.forEach(element => {
        if(row.columnName == element.columnName){
          element.checked =  true;
          this.outputCurrentRow = row;
        }
        else{
          element.checked =  false;
        }
      });
      let tmpInputData = this.deepClone(this.outputData)
      this.outputData = [];
      this.outputData = tmpInputData;
    },

    /**
     * 单击选择输出接口字段
     */
    checkBusOutputCurrentRow(row){
      this.databusData.forEach(element => {
        if(row.columnName == element.columnName){
          element.checked =  true;
          this.databusCurrentRow =  row;
          this.mappingDatabusAndOutputData();
        }
        else{
          element.checked =  false;
        }
      });
      let tmpInputData = this.deepClone(this.databusData)
      this.databusData = [];
      this.databusData = tmpInputData;
    },
    /**
     * 开始映射字段关系
     */
    mappingDatabusAndOutputData(){
      if(this.databusCurrentRow.dataType != this.outputCurrentRow.dataType){
        this.$message({
          type: 'warning',
          message: '字段类型不匹配!'
        });
        return false
      }
      if(this.outputCurrentRow && this.outputCurrentRow.columnName){
        let isInMappingList = false;
        this.outputMappingData.forEach(element => {
          if(element.dataBusColumnName == this.databusCurrentRow.columnName && element.outputColumnName == this.outputCurrentRow.columnName){
            isInMappingList = true;
          }
        });
        //如果不存在则添加一条映射记录
        if(!isInMappingList){
          this.outputMappingData.push({
            dataBusColumnName: this.databusCurrentRow.columnName,
            dataBusColumnComment: this.databusCurrentRow.columnComment,
            outputColumnName: this.outputCurrentRow.columnName,
            outputColumnComment: this.outputCurrentRow.columnComment
          });
        }
      }
    },
    /**
     * 根据映射关系反显示总线和输入
     */
    getMappingOutputElement(row){
      //总线
      this.databusData.forEach(element => {
        if(row.dataBusColumnName == element.columnName){
          element.checked =  true;
          this.databusCurrentRow = element;
        }
        else{
          element.checked =  false;
        }
      });
      let tmpDatabusData = this.deepClone(this.databusData)
      this.databusData = [];
      this.databusData = tmpDatabusData;

      //输出
      this.outputData.forEach(element => {
        if(row.outputColumnName == element.columnName){
          element.checked =  true;
          this.outputCurrentRow =  element;
        }
        else{
          element.checked =  false;
        }
      });

      let tmpOutputData = this.deepClone(this.outputData)
      this.outputData = [];
      this.outputData = tmpOutputData;
    },
    /**
     * 删除映射关系
     */
    mappingOutputRowDel(row){
      this.$confirm('确定删除映射关系?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.outputMappingData.forEach((element,index) => {
            if(element.dataBusColumnName == row.dataBusColumnName && element.outputColumnName == row.outputColumnName ){
              this.outputMappingData.splice(index,1);
            }
          });
        })
        .then(() => {
          
        }).catch(() => {});
    },
    /**
     * output接口映射排序
     */
    outputMappingSortChange(oldindex, newindex, row, list) {
      this.outputMappingData=[]
      this.$nextTick(()=>{
        this.outputMappingData=list;
      })
    },

    /**
     * 关闭配置窗口
     */
    mappingDialog(){
      this.$emit('closeMappingDialog');
    },

    /**
     * 保存配置
     */
    saveMappingData(){
      this.$emit('saveMappingData',this.inputMappingData, this.outputMappingData);
    }
  },
  created() {
    this.databusData = this.deepClone(this.serviceBusData);
  },
  watch: {
    serviceComponentData: {
      handler(newValue, oldValue) {
        if(this.serviceComponentData.type == 'C')
          this.queryComponent();
        else{
          this.queryProcess();
        }
        this.inputMappingData = this.deepClone(this.serviceComponentData.inputMappingRelation);
        this.outputMappingData = this.deepClone(this.serviceComponentData.outputMappingRelation);
      },
      deep: true
    },
    serviceBusData: {
      handler(newValue, oldValue) {
        this.databusData = this.deepClone(this.serviceBusData);
        this.inputCurrentRow = {};
        this.databusCurrentRow = {};
        this.outputCurrentRow = {};
        this.databusData.forEach(element => {
          element.checked =  false;
        });
      },
      deep: true
    }
  }
};
</script>
<style>
.tabBody .el-card__body{
    padding: 10px 0px !important;
}
.tabBody .dialog-footer{
    padding-top: 30px;
    text-align: center;
}

.tabBody .el-table__header tr, .tabBody .el-table__header th , .tabBody .el-table__header td {
        padding: 0 !important;
        height: 40px !important;
  }

.tabBody .avue-crud__menu{
   display: none !important;
 }
 .tabBody .avue-crud__pagination{
   padding:5px !important;
   margin: 0px !important;
 }
 .tabBody .el-card__body{
   padding: 2px!important;
 }
</style>
